<template>
  <div class="wrap">
    <div class="card-header">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-card class="header-card today-card">
            <div class="title">今日新增订单</div>
            <div class="num">{{today.totalOrderNum}}</div>
            <div class="item">
              <span>未处理订单数：</span>
              <span class="item-num">{{today.untreatedNum}}</span>
            </div>
            <div class="item">
              <span>代贴单数：</span>
              <span class="item-num">{{today.stickerOrderNum}}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="header-card yesterday-card">
            <div class="title">昨日新增订单</div>
            <div class="num">{{yesterday.totalOrderNum}}</div>
            <div class="item">
              <span>代贴单数：</span>
              <span class="item-num">{{yesterday.stickerOrderNum}}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="header-card user-card">
            <div class="title">本月新增订单数</div>
            <div class="num">{{month.totalOrderNum}}</div>
            <div class="item">
              <span>代贴单数：</span>
              <span class="item-num">{{month.stickerOrderNum}}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="header-card income-card">
            <div class="title">总订单</div>
            <div class="num">{{total.totalOrderNum}}</div>
            <div class="item">
              <span>未处理订单数：</span>
              <span class="item-num">{{total.untreatedNum}}</span>
            </div>
            <div class="item">
              <span>代贴单数：</span>
              <span class="item-num">{{total.stickerOrderNum}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="content-table">
      <el-tabs v-model="tab" @tab-click="handleClick" v-if="accountNum > 1">
        <el-tab-pane label="日期维度" name="date"></el-tab-pane>
        <el-tab-pane label="店铺维度" name="shop"></el-tab-pane>
      </el-tabs>
      <div class="table">
        <div class="search">
          <div class="left">
            <el-date-picker
              v-model="queryParams.times"
              @change="getData"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              @click="this.minDate = null"
            >
            </el-date-picker>
          </div>
          <div class="right">
            <el-select v-model="queryParams.showType" placeholder="请选择">
              <el-option label="隐藏无数据" :value="1"></el-option>
              <el-option label="显示全部数据" :value="2"></el-option>
            </el-select>
          </div>
        </div>
        <div v-show="tab === 'date'">
          <el-table
            :data="tableData"
            :border="true"
            v-loading="loading"
            stripe
            show-summary
          >
            <el-table-column
              prop="date"
              label="日期"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="orderNum"
              label="新增订单数"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="stickerNum"
              label="代贴单数"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="totalPrice"
              label="消耗金额（元）"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>


        <div v-show="tab === 'shop'">
          <el-table
            :data="tableAccountData"
            v-loading="loading"
            :border="true"
            stripe
            show-summary
          >
            <el-table-column
              prop="nickname"
              label="店铺"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="remarkName"
              label="自定义店铺名"
              align="center"
            >
              <template slot-scope="{row}">
                {{row.remarkName || '-'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="orderNum"
              label="新增订单数"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="stickerNum"
              label="代贴单数"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="cost"
              label="消耗金额（元）"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
import {accountIndex, getIndex} from "@/api/statistics";
import {dateFormat} from "@/utils/common";

export default {
  name: "statisticsIndex",
  computed:{
    tableData(){
      const tableData = [];
      this.data.forEach(item=>{
        if(this.queryParams.showType === 1){
          if(item.orderNum === 0 && item.stickerNum === 0 && item.totalPrice === 0){
            return
          }
        }
        tableData.push(item)
      })
      return tableData;
    },
    tableAccountData(){
      const tableData = [];
      this.accountData.forEach(item=>{
        if(this.queryParams.showType === 1){
          if(item.orderNum === 0 && item.stickerNum === 0 && item.cost === 0){
            return
          }
        }
        tableData.push(item)
      })
      return tableData;
    }
  },
  data(){
    return {
      queryParams:{
        times:[], // 日期
        showType: 1, // 1隐藏无数据 2显示所有数据
        keywords:'', // 搜索关键字
      },
      minDate: null,
      // 日期选项
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '过去7天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 8);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '过去30天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '过去90天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
              picker.$emit('pick', [start, end]);
            }
          },
        ],
        disabledDate: time=>{
          if(time.getTime() > Date.now()){
            return true // 选当前时间之前的时间
          }
          if(!this.minDate){
            return false;
          }
          let minTime = this.minDate.getTime()
          let timeTime = time.getTime()
          let diffDays = Math.abs(minTime - timeTime)
          diffDays = diffDays / (1000 * 60 * 60 *24)
          return diffDays > 91;
        },
        onPick: pick =>{
          if(pick.minDate){
            this.minDate = pick.minDate;
          }
        }

      },
      data:[],
      accountData: [],
      accountNum: 0,
      loading:false,
      today:{
        stickerOrderNum: 0,
        totalOrderNum: 0,
        untreatedNum: 0,
      },
      yesterday:{
        stickerOrderNum: 0,
        totalOrderNum: 0,
      },
      month:{
        stickerOrderNum: 0,
        totalOrderNum: 0,
      },
      total:{
        stickerOrderNum: 0,
        totalOrderNum: 0,
        untreatedNum: 0,
      },
      tab: 'date',
    }
  },
  created() {

    const date = new Date()

    let endTime = dateFormat('yyyy-MM-dd',date)
    date.setDate(date.getDate() - 30)
    let startTime = dateFormat('yyyy-MM-dd',date)

    this.queryParams.times = [startTime,endTime]

    this.getTime();
    this.getData();
  },
  methods:{
    // 切换tab
    handleClick(){
      this.getData()
    },
    disableFunc(time){
      return true
    },
    getTime(){
      getTimeInfo()
        .then(res=>{
          const data = res.data
          this.total = data.total;
          this.today = data.today;
          this.yesterday = data.yesterday;
          this.month = data.month;
          this.accountNum = res.info.accountNum
        })
    },
    getData(){
      if(this.queryParams.times === null || this.queryParams.times.length === 0){
        this.data = [];
        return;
      }
      this.loading = true
      if(this.tab === 'date'){
        getIndex(this.queryParams)
          .then(res=>{
            this.loading = false
            this.data = res.data
          })
      }
      if(this.tab === 'shop'){
        accountIndex(this.queryParams)
          .then(res=>{
            this.loading = false
            this.accountData = res.data
          })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
}
.today-card{
  background: inherit;
  background-color: #4A89DC;
}
.yesterday-card{
  background: inherit;
  background-color: #5D9CEC;
}
.user-card{
  background: inherit;
  background-color: #3bafda;
}
.income-card{
  background: inherit;
  background-color: #7db1b1;
}
.header-card{
  color: #FFFFFF;
  font-size: 14px;
  height: 150px;
  .title{
    font-weight: 400;
    font-style: normal;
    color: #FFFFFF;
  }
  .num{
    font-size: 36px;
    font-weight: 500;
    margin: 10px 0;
  }
  .item{
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 10px;
    .item-num{
      color: #FFCD00;
    }
  }
}
.content-table{
  margin-top: 20px;

  .table{
    .search{
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
  }
}
</style>
